<template>
  <el-row :gutter="24" class="el-row">
    <el-col :span="24" class="el-card">
      <div id="keywordStatsChart" style="width: 100%; height: 280px" />
    </el-col>
  </el-row>
</template>



<script>
import * as echarts from 'echarts';
import api from "@/api/statistics/real/realtime";
export default {
  // 生命周期函数：内存准备完毕，页面渲染成功
  // 生命周期函数：内存准备完毕，页面渲染成功
  mounted() {
    this.init()
  },
  data() {
    return {
      limit:20,
      cData: [
        // {"children":[{"children":[{"name":"米面杂粮","value":53}],"name":"粮油调味","value":53}],"name":"食品饮料、保健食品"},{"children":[{"children":[{"name":"手机","value":227}],"name":"手机通讯","value":227}],"name":"手机"},{"children":[{"children":[{"name":"平板电视","value":81}],"name":"大 家 电","value":81}],"name":"家用电器"},{"children":[{"children":[{"name":"香水","value":26},{"name":"唇部","value":95}],"name":"香水彩妆","value":121}],"name":"个护化妆"},
      ],
    };
  },

  props:{
    today:''
  },
  methods: {
    // 加载banner列表数据
    init() {
      this.setChartData()
      api.getKeywordStats(this.today,this.limit).then((response) => {
        console.log("111111111"+response.data)
        this.cData = response.data;
        this.setChartData();
      })
        .catch((response) => {
          console.log("失败" + response);
          // Vue.$message.error('服务器错误，请稍后再试')
          //reject(response)
        });
    },
    setChartData() {
      const option = {
        title: {
          text: '热词图'
        },
        series: [{
          type: 'wordCloud',
          gridSize: 20,
          sizeRange: [12, 50],
          rotationRange: [-90, 90],
          shape: 'pentagon',
          textStyle: {
            normal: {
              color: function () {
                return 'rgb(' + [
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160)
                ].join(',') + ')';
              }
            },
            emphasis: {
              shadowBlur: 10,
              shadowColor: '#333'
            }
          },
          data:this.cData
        }]
      }
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("keywordStatsChart"));

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>

